<template>
    <div>
        <nav-header></nav-header>
        <nav-bread>
            <span slot="q">Goods</span>
            <!-- <span slot="r">Goods</span> -->
        </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="sortPrice">Price <svg class="icon icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}"><use xlink:href="#icon-arrow-short"></use></svg></a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceCheckedFilter=='all'}" @click="priceCheckedFilter='all'">All</a></dd>
                <dd v-for="(item,index) in priceFilter">
                  <a href="javascript:void(0)" v-bind:class="{'cur':priceCheckedFilter==index}" @click="setPriceFilter(index)">{{item.startPrice}} - {{item.endPrice}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="(item,index) in goodsList">
                    <div class="pic">
                      <a href="#"><img v-lazy="'static/'+item.prodcutImg" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.prodcutName}}</div>
                      <div class="price">{{item.prodcutPrice}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-infinite-scroll ="loadMore" infinite-scroll-disabled ="busy" infinite-scroll-distance ="20">
                    <img src="./../../static/loading-svg/loading-spinning-bubbles.svg" alt="" v-show="loading">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="md-overlay" v-show="overLayFilter" @click="closePop"></div>
      <modal v-bind:mdShow="mdShow" v-on:close="closeModel">
          <p slot="message">
            请先登录，否则无法加入到购物车中！
          </p>
          <div slot="btnGroup">
            <a href="javascript:;" class="btn btn-m" @click="mdShow=false">关闭</a>
          </div>
      </modal>
      <modal v-bind:mdShow="mdShowCart" v-on:close="closeModel">
          <p slot="message">
            <span>加入购物车！</span>
          </p>
          <div slot="btnGroup">
            <a href="javascript:;" class="btn btn-m" @click="mdShow=false">继续购物</a>
            <router-link class="btn btn-m" href="javascript:;" to="/cart">查看购物车</router-link>
          </div>
      </modal>
    <nav-footer></nav-footer>
    </div>
</template>
<script>
    import './../assets/css/base.css'
    import './../assets/css/product.css'
    import './../assets/css/login.css'
    import './../assets/css/checkout.css'
    import NavHeader from '@/components/NavHeader.vue'
    import NavFooter from '@/components/NavFooter.vue'
    import NavBread from '@/components/NavBread.vue'
    import Modal from '@/components/Modal.vue'
    export default{
        data(){
            return {
              goodsList:[],
              priceFilter:[
                {
                  startPrice:0,
                  endPrice:100
                },
                {
                  startPrice:100,
                  endPrice:500
                },
                {
                  startPrice:500,
                  endPrice:1000
                }
              ],
              priceCheckedFilter:'all',
              filterBy:false,
              overLayFilter:false,
              sortFlag:true,
              page:1,
              pageSize:8,
              busy:true,
              loading:false,
              mdShow:false,
              mdShowCart:false
            }
        },
        components:{
            NavHeader,
            NavFooter,
            NavBread,
            Modal
        },
        mounted(){
            this.getGoodsList();
            this.goodsLi();
        },
        methods:{
            getGoodsList(flag){
                var param={
                  page:this.page,
                  pageSize:this.pageSize,
                  sortFlag:this.sortFlag,
                  priceLeverl:this.priceCheckedFilter
                };
                this.loading = true;
                this.$ajax.get("/api/goods",{
                  params:param
                }).then((res)=>{
                    var res=res.data;
                    this.loading = false;
                    if(res.status == "0"){
                      if(flag){
                        this.goodsList = this.goodsList.concat(res.result);
                        // if(res.count>20){
                        //   this.busy = true;
                        // }else{
                        //   this.busy = false;
                        // }
                        if(this.goodsList.length<20){
                          this.busy = true;
                        }else{
                          this.busy = false;
                        }
                      }else{
                        // console.log(this.goodsList.length);
                        this.goodsList=res.result;
                        this.busy = false;
                      }

                      // 存入cookie
                      this.$cookie.set('userId', 'liulu');
                    }else{
                      this.goodsList=[];
                    }

                })
            },
            showFilterPop(){
                this.filterBy=true;
                this.overLayFilter=true;
            },
          setPriceFilter(index){
            this.priceCheckedFilter=index;
            this.filterBy=false;
            this.overLayFilter=false;
          },
          closePop(){
            this.filterBy=false;
            this.overLayFilter=false;
          },
          goodsLi(){
            this.$ajax.post("/list/UserCenter/ceshi").then((res)=>{
                // var res=res.data;
                console.log(res);
            })
          },
          // 排序
          sortPrice(){
            this.sortFlag = !this.sortFlag;
            this.page = 1;
            this.getGoodsList();
          },
//          加载更多
          loadMore(){
            this.busy = true;
            setTimeout(() => {
              this.page++;
              this.getGoodsList(true);
            },1000);
          },
//          加入购物车
          addCart(productId){
            this.mdShow=true;
               this.$ajax.post("/api/addCart",{
                   productId:productId
               }).then((res) => {
                   if(res.status==0){
                       alert("加入成功");
                       this.mdShow=true;
                       this.$store.commit("updateCartCount",1);

                   }else{
                       // alert("msg:"+res.msg);
                       this.mdShow=true;
                   }
               })
          },
          closeModel(){
            this.mdShow=false;
          }
        }
    }
</script>
